<template>
  <!-- ✓ GOOD -->
  <div>{{ name }}: {{ count }}</div>
  <!-- ✗ BAD -->
  <div>{{ label }}: {{ cnt }}</div>
</template>
<script setup lang="ts">
import { watch } from 'vue'

interface IProps {
  name?: string
  def?: number
}

const jsonData = [
  {
    name: 'jsonData1', undef: 0,
  }, {
    name: 'jsonData2',
    undef: 0,
  },
]

const prop = defineProps<IProps>()
let count = 0

/* ✓ GOOD */
watch(() => prop.def, () => console.log('Updated!'))

/* ✗ BAD */
watch(() => prop.undef, () => console.log('Updated!'))
</script>

<style scoped lang="scss"></style>
